<template>
    
    <main class="main-content">
        <div class="welcome-section">
            <h1>欢迎来到我的博客</h1>
            <p>这里分享技术知识和生活感悟</p>
        </div>
        <div class="posts-grid">
            <div class="post-cord">文章内容1</div>
            <div class="post-cord">文章内容2</div>
            <div class="post-cord">文章内容3</div>
        </div>
    </main>

</template>

<script setup>
import {ref} from 'vue'



</script>

<style scoped>
.main-content {
    padding: 2rem;
}

.posts-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px 1fr));
    gap: 1rem;
}
.posts-cord{
    padding: 1.5rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(
        0,0,0,0.1
    );
}

</style>